<template>
  <div id="page-userManage">
    <!-- 查询 -->
    <div class="page-search-list">
      <el-form label-position="left" :model="search_from" :inline="true">
        <el-form-item
          v-for="(item, i) in search_info"
          :label="item.label"
          :key="i"
          style="margin-bottom: 5px;"
        >
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="search_from[item.prop]"
              :pid.sync="search_from.pid"
              :bid.sync="search_from.bid"
              :sidVisiabel="false"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'start_time'">
            <template v-if="!is_time_period">
              <el-date-picker
                type="dates"
                v-model="search_from.time"
                placeholder="选择一个或多个日期"
                key="time"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                v-model="search_from.time_period"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                key="time_period"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
          </template>
          <template v-else>
            <el-input
              v-model="search_from[item.prop]"
              size="small"
              :placeholder="`请输入${item.label}`"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-search" size="small" @click.native="search">
            搜索
          </el-button>
          <el-button
            type="primary"
            class="el-icon-refresh"
            size="small"
            @click.native="resetSearchFields"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="page-botton-list">
      <el-button
        plain
        class="el-icon-date"
        size="mini"
        @click.native="is_time_period = !is_time_period"
      >
        {{ is_time_period ? '时间查询' : '时间段查询' }}
      </el-button>
      <el-button
        type="primary"
        plain
        class="el-icon-plus"
        size="mini"
        @click="
          auth_allocation = true
          is_add_auth = true
        "
      >
        分配权限
      </el-button>
      <el-button
        type="primary"
        plain
        class="el-icon-check"
        size="mini"
        :disabled="is_delete"
        @click="selectRow(null, 0)"
      >
        通过
      </el-button>
      <el-button
        type="warning"
        plain
        class="el-icon-close"
        size="mini"
        :disabled="is_delete"
        @click="selectRow(null, 1)"
      >
        驳回
      </el-button>
      <el-button
        type="danger"
        plain
        class="el-icon-delete"
        size="mini"
        :disabled="is_delete"
        @click="selectRow(null, 2)"
        key="delete_arr_button"
      >
        删除
      </el-button>
      <ExportExcel
        style="margin-left: 0.625rem;"
        :id="'tableDataId'"
        :label="'导出'"
        :multipleSelection="multiple_selection"
        :tableData="tableData"
        :tableInfo="tableInfo"
      ></ExportExcel>
    </div>
    <!-- 表格 -->
    <div class="page-table">
      <el-table
        ref="tableDataRef"
        :data="tableData"
        style="width: 100%;"
        id="tableDataId"
        @selection-change="selectTabel"
      >
        <el-table-column type="selection" />
        <el-table-column
          v-for="(column, i) in tableInfo"
          :key="i"
          :label="column.label"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.prop === 'sex'">
              <el-tag>{{ scope.row[column.prop] === 0 ? '女' : '男' }}</el-tag>
            </template>
            <template v-else-if="column.prop === 'role'">
              <!-- type="info" -->
              <el-tag v-if="scope.row[column.prop] == '居民'">
                {{ scope.row[column.prop] }}
              </el-tag>
              <div v-else class="el-tag-style">
                {{ scope.row[column.prop] }}
              </div>
            </template>
            <template v-else>{{ scope.row[column.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px" align="center">
          <template slot-scope="scope">
            <el-link
              style="margin-right: 5px;"
              type="primary"
              icon="el-icon-check"
              @click="selectRow(scope.row, 0)"
            >
              同意
            </el-link>
            <el-link
              type="primary"
              icon="el-icon-close"
              @click="selectRow(scope.row, 1)"
            >
              驳回
            </el-link>
            <el-link
              style="margin-right: 5px;"
              type="primary"
              icon="el-icon-edit"
              @click="changeAuth(scope.row)"
            >
              修改
            </el-link>
            <el-link
              type="primary"
              icon="el-icon-delete"
              @click="selectRow(scope.row, 2)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageCount"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tatal"
        class="upload-list-pagination"
      ></el-pagination>
    </div>

    <!-- 添加/修改 弹窗 -->
    <el-dialog
      :title="is_add_auth ? '添加居民权限' : '修改居民权限'"
      :visible.sync="auth_allocation"
      :append-to-body="true"
      width="40%"
    >
      <el-form
        :model="dialog_from"
        label-position="left"
        :rules="rules"
        ref="addUserDialogRef"
      >
        <el-form-item
          v-for="(item, i) in dialog_info"
          :key="i"
          :label="item.label"
          label-width="80px"
          :prop="item.prop"
        >
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="dialog_from[item.prop]"
              :pid.sync="dialog_from.pid"
              :bid.sync="dialog_from.bid"
              :sid.sync="dialog_from.sid"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'role_id'">
            <el-select
              v-model="dialog_from[item.prop]"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in role_id_arr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input
              :maxlength="item.prop === 'tel' ? 11 : null"
              v-model="dialog_from[item.prop]"
              size="small"
            ></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" v-if="is_add_auth" @click="trueAdd">
          确定添加
        </el-button>
        <el-button v-else type="primary" @click="trueAuth">
          确定修改
        </el-button>
      </div>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="select_row_dialog_visible"
      width="30%"
      center
      :append-to-body="true"
    >
      <div style="text-align: center;">
        是否{{ option === 0 ? '同意' : option === 1 ? '驳回' : '删除'
        }}{{ is_select ? '以下' : '该' }}用户的申请
        <li v-for="(item, i) in select_row_arr" :key="i">
          {{ i + 1 + '.' + item.name + '（' + item.account + '）' }}
        </li>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="falseSelectOption">取 消</el-button>
        <el-button type="primary" @click="trueSelectOption">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { isNull, assignAttr } from '@/utils/tool'
import { getList } from '@/api/admin/user'
import { rules } from '@/utils/rules'
export default {
  computed: {
    is_delete() {
      return !this.multiple_selection.length > 0
    },
  },
  watch: {
    search_from: {
      handler(val) {
        console.debug(val)
      },
    },
    auth_allocation: {
      handler(val) {
        if (!val) {
          this.dialog_from = {
            cid: '',
            pid: '',
            bid: '',
            sid: '',
            account: '',
            role_id: '',
          }
        }
      },
    },
    select_row_dialog_visible: {
      handler(val) {
        if (!val) {
          this.select_row_arr = []
          this.$refs.tableDataRef.clearSelection()
        }
      },
    },
    dialog_from: {
      handler(val) {
        console.debug(val)
        if (!this.auth_allocation && this.$refs.addUserDialogRef)
          this.$refs.addUserDialogRef.clearValidate()
      },
      deep: true,
      immediate: true,
    },
    change_user: {
      handler(val) {
        console.log(val)
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
      // 查询信息
      search_from: {
        cid: '',
        pid: '',
        bid: '',
        name: '', // 名称
        time: [], // 选择时间 可多选
        time_period: [], // 时间段
      },
      is_time_period: false, // 是否以时间段查询
      search_info: {
        cid: { label: '社区', prop: 'cid' },
        name: { label: '姓名', prop: 'name' },
        start_time: { label: '申请日期', prop: 'start_time' },
      },
      tableInfo: {
        cid: { label: '社区', prop: 'cid' },
        name: { label: '姓名', prop: 'name' },
        age: { label: '年龄', prop: 'age' },
        sex: { label: '性别', prop: 'sex' },
        tel: { label: '电话', prop: 'tel' },
        role: { label: '角色', prop: 'role' },
        create_time: { label: '申请时间', prop: 'create_time' },
        request_auth: { label: '申请角色', prop: 'request_auth' },
      },
      tableData: [
        {
          account: 18766666666,
          cid: '滨海小区3期4栋',
          name: '张三',
          age: 25,
          sex: 1,
          tel: 18766666666,
          role: '居民',
          create_time: '2020-5-6',
          request_auth: '滨海小区3期4栋1管理员', // 1删除 0正常
        },
        {
          account: 18788888888,
          cid: '滨海小区3期4栋',
          name: '路人甲',
          age: 25,
          sex: 1,
          tel: 18766666666,
          role: '滨海小区3期4栋管理员',
          create_time: '2020-5-6',
          request_auth: '滨海小区3期管理员', // 1删除 0正常
        },
      ],
      multiple_selection: [], // 表格选择
      auth_allocation: false, // 权限分配弹窗
      is_add_auth: false, // 是否修改
      dialog_from: {
        cid: '',
        pid: '',
        bid: '',
        sid: '',
        account: '',
        role_id: '',
      },
      dialog_info: {
        cid: { label: '社区', prop: 'cid' },
        account: { label: '账号', prop: 'account' },
        role_id: { label: '分配角色', prop: 'role_id' },
      },
      select_row_dialog_visible: false, //删除弹窗是否可见
      select_row_arr: [], // 删除数组
      rules: {
        ...rules,
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        role_id: [{ required: true, message: '请选择权限', trigger: 'blur' }],
      },
      change_user: {
        name: '',
        account: '',
      },
      option: null, // 0同意 1驳回 2删除
      is_select: null, // true选择 false表点击
      role_id_arr: [],
    }
  },
  created() {},
  methods: {
    /* 请求 */
    /* DOM 操作 */
    // 搜索
    search() {
      console.debug(this.search_from)
      const data = this.travelFrm
      getList({ pageSize: this.pageSize, pageCount: this.pageCount }).then(
        (res) => {
          console.log(res.data)
          this.tableData = res.data
        },
      )
    },
    // 清空搜索条件
    resetSearchFields() {
      this.search_from = {
        cid: '',
        uname: '',
        time: [],
        time_period: [],
        admin_id: '',
      }
    },
    // 表格选择
    selectTabel(val) {
      this.multiple_selection = val
    },

    trueAdd() {
      this.auth_allocation = false
      this.$message({
        message: '添加成功',
        type: 'success',
      })
    },
    // 点击 取消 最外弹窗
    cancelDialog() {
      this.auth_allocation = false
    },
    // 点击修改
    changeAuth(row) {
      this.auth_allocation = true
      this.is_add_auth = false
      // 查询
      console.debug(row)
      assignAttr(row, this.dialog_from)
    },
    // 确认修改
    trueAuth() {
      this.auth_allocation = false
      this.$message({
        message: '修改成功',
        type: 'success',
      })
    },
    // 选择
    selectRow(row, option) {
      this.select_row_dialog_visible = true
      this.option = option
      if (isNull(row)) {
        // 单个
        let user = {
          account: row.account,
          name: row.name,
        }
        this.select_row_arr.push(user)
        this.is_select = false
        console.debug('单个')
      } else {
        this.multiple_selection.forEach((item) => {
          let user = {
            account: item.account,
            name: item.name,
          }
          this.select_row_arr.push(user)
        })
        console.debug('数组')
        this.is_select = true
      }
      console.log(this.option, this.is_select)
    },
    // 同意
    agree() {
      this.$message({
        message: '已通过',
        type: 'success',
      })
    },
    // 驳回
    reject() {
      this.$message({
        message: '已驳回',
        type: 'success',
      })
    },
    // 删除
    delete() {
      this.$message({
        message: '已删除',
        type: 'success',
      })
    },
    falseSelectOption() {
      this.select_row_dialog_visible = false
      this.$message('已取消')
    },
    trueSelectOption() {
      this.select_row_dialog_visible = false
      switch (this.option) {
        case 0:
          return this.agree()
        case 1:
          return this.reject()
        case 2:
          return this.delete()
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="less" scoped>
#page-userManage {
  padding: 0 0.5rem;
  .page-table {
    .el-button {
      margin: 2px 0;
    }
  }
  .el-collapse-title-div {
    display: flex;
    justify-content: space-around;
    width: 90%;
  }
  .el-form-ul {
    min-height: 2.375rem;
    border: 1px solid #dcdfe6;
  }
  /deep/.el-collapse {
    border: none;
    background-color: rgba(255, 255, 255, 0);
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
}
.page-botton-list {
  margin-bottom: 0.625rem;
}
.ul-address-date {
  display: flex;
  .ul-address-date-item {
    flex: 1;
    margin-right: 1.25rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
/deep/.el-select {
  width: 100%;
}
.address-tag {
  margin-right: 0.625rem;
  &:last-child {
    margin-right: 0;
  }
}
.upload-list-pagination {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}
.el-tag-style {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  padding: 5px 10px;
  line-height: 18px;
  font-size: 12px;
  color: #409eff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>
